import React, { useState, useEffect } from 'react';
import dataList from './data.json'
import './style.css'
import { Area } from '@ant-design/charts';
import { Select } from 'antd';
const { Option } = Select;
const StiffWoodTrend = () => {
  const [data, setData] = useState([]);//总数据
  const [yearVal, selVal] = useState('2010');//年份value
  const [year, setYear] = useState([])//年份
  useEffect(() => {
    asyncFetch();
  }, []);
  useEffect(() => {
    yearFilter();
  }, [data])

  const asyncFetch = () => {
    setData(dataList)
  };

  // 过滤出当前的年份
  const newData = data.filter(item => yearVal === item.Date.substring(0, 4))

  // 所有年份去重
  const yearFilter = () => {
    const years = data.map(item => item.Date.substring(0, 4))
    const val = new Set(years)
    setYear([...val])
  }

  // 下拉事件
  const handleChange = (value) => {
    console.log(value, "value");
    selVal(value)
  }

  var config = {
    data: newData,
    xField: 'Date',
    yField: 'scales',
    seriesField: 'sex',
    smooth: 'true',//线条平滑
    xAxis: {
      tickCount: 6,
        
    },
    yAxis: {
      grid: {
        line: {
          style: {
            stroke: '#FFFFFFFF',
            opacity:0.3,
            lineDash: [4, 5],
            strokeOpacity: 0.5,
            shadowBlur:0.2,
            cursor: 'pointer',
          }
        }
      }
    },
    color: [ '#01DFFDFF'],
    legend: {
      position: "top",
    }
  };
  return <div className="sti-wood-trend" >
    <div className="echart-container" style={{ width: "95%", height: "95%", boxSizing: "border-box", margin: "0 auto" }}>
      <div className="sel">
        <div></div>
        <div className="sel-info">
          <div className="date">出生日期:</div>
          <Select defaultValue="请选择" style={{ width: 150 }} onChange={handleChange}>

            {
              year.map((v, i) => (
                <Option value={v} key={i}>{v}</Option>
              ))
            }
          </Select>
        </div>
      </div>
      <Area {...config} />;
    </div>
  </div>;
};

export default StiffWoodTrend;